<template>
    <div class="header">
        <div class="header-content">
            <div class="title">
                个人博客
            </div>
            <div class="nav">
                <ul class="center">
                    <li
                        v-for="(item,index) in navList"
                        :key="index"
                    >
                        <router-link :to="item.path">
                            {{ item.name }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { getTypes } from 'assets/js/api';
    export default {
        data () {
            return {
                navList: [
                    {
                        path: '/index',
                        name: '网站首页'
                    }
                ]
            };
        },
        mounted () {
            this.getTypes();
        },
        methods: {
            /**
             * 获取文章类型
             */
            getTypes () {
                getTypes({}).then(res => {
                    res.data.map(item => {
                        // 把文章类型添加到路由列表
                        this.navList.push({
                            path: `/articleTypes/${ item.typeName }`,
                            name: item.typeName
                        });
                    });
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
.header{
    height: 46px;
    color: @color-text-main;
    background-color: @color-background-d;
    .header-content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        .title{
            font-size: @font-size-large-x;
        }
        .nav li:not(:first-of-type){
            margin-left: 40px;
        }
        a{
            font-size: @font-size-medium-x;
            color: @color-text-main;
        }
        a.router-link-active{
            color: @color-text-nav-selected;
        }
    }
}
</style>
